<template>
  <el-card>
    <el-row :gutter="25">
      <el-col :span="7">
        <!-- 搜索添加 -->
        <el-input
          placeholder="请输入姓名"
          v-model.lazy="queryInfo.searchName"
          @change="getDescribeList"
        >
        </el-input>
      </el-col>

      <el-col :span="4">
        <el-button type="primary" @click="dialogAddVisible = true"
          >添加成员事件</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table
      :data="describeList"
      border
      stripe
      v-loading="isLoading"
      element-loading-background="rgba(255, 255, 255, .5)"
      element-loading-text="加载中，请稍后..."
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column label="序号" type="index" fixed="left"></el-table-column>
      <el-table-column label="事件编号" prop="DescribeNo"></el-table-column>
      <el-table-column label="姓名" prop="DescribeName"></el-table-column>
      <el-table-column label="事件时间" prop="Time"></el-table-column>
      <el-table-column label="事件类型" prop="Type"></el-table-column>
      <el-table-column label="事件描述" prop="Describe" width="450"></el-table-column>
      <el-table-column label="更新时间" prop="UpdateTime"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteDescribe(scope.row.DescribeNo)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[1, 5, 10, 100]"
      :page-size="queryInfo.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-card>

  <el-dialog title="添加成员" v-model="dialogAddVisible" width="50%">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="100px"
    >
        <el-form-item label="事件编号" prop="DescribeNo">
            <el-input v-model="addForm.DescribeNo" @blur="test()"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="DescribeName">
            <el-input v-model="addForm.DescribeName"></el-input>
        </el-form-item>
        <el-form-item label="事件时间" prop="Time">
            <el-input v-model="addForm.Time"></el-input>
        </el-form-item>
        <el-form-item label="事件类型" prop="Type">
            <el-select v-model="addForm.Type" placeholder="请选择事件类型">
                <el-option label="出生" value="出生"></el-option>
                <el-option label="结婚" value="结婚"></el-option>
                <el-option label="重病" value="重病"></el-option>
                <el-option label="重大成就" value="重大成就"></el-option>
                <el-option label="死亡" value="死亡"></el-option>
                <el-option label="其他" value="其他"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="事件描述" prop="Describe">
            <el-input v-model="addForm.Describe"></el-input>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="addDescribe()">确 定</el-button>
    <el-button @click="dialogAddVisible = false">取 消</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      dialogAddVisible: false,
      dialogEditVisible: false,
      queryInfo: {
        searchNo: "",
        page: 1,
        limit: 10,
      },
      describeList: [], 
      total: 0, 
      addForm: {
        DescribeNo: "",
        DescribeName: "",
        Time: "",
        Type: "",
        Describe: "",
        UpdateTime: "",
      },
      addFormRules: {
        DescribeNo: [
          {
            required: true,
            message: "请输入事件编号",
            trigger: "blur",
          },
        ],
        DescribeName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        Time: [
          {
            required: true,
            message: "请输入事件时间",
            trigger: "blur",
          },
        ],
        Describe:[
          {
            required: true,
            message: "请输入事件描述",
            trigger: "blur",
          },
        ]
        
      },


      
    };
  },
  created() {
    this.getDescribeList();
  },
  methods: {
    async getDescribeList() {
      this.isLoading = true;
      console.log(this.describeList)
      const { data: res } = await this.$http.get("system/apis/describe", {
        params: this.queryInfo,
      });
      if (res.code != 20000) {
        this.$message.error("加载用户列表失败");
        this.isLoading = false;
      }
      this.describeList = res.data.value;
      this.total = res.data.total;
      this.isLoading = false;
    },
    handleSizeChange(newLimit) {
      this.queryInfo.limit = newLimit;
      this.getDescribeList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getDescribeList();
    },
    test(){
      console.log(this.addForm.DescribeName);
    },
    async deleteDescribe(DescribeNo) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$http.delete(
        "system/apis/describe?describe_no=" + DescribeNo
      );
      console.log(res);
      if (res.code != 20000) {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getDescribeList();
      console.log(DescribeNo)
    },
    
    addDescribe() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        console.log( this.addForm);
        const { data: res } = await this.$http.post(
          "/system/apis/describe",
          this.addForm
        );
        if (res.code == 20000) {
          this.getDescribeList();
          this.dialogAddVisible = false;
          console.log(this.describeList)
          return this.$message.success("添加成功");
        }
        this.$message.error("添加失败");
      });
    },

    
    dialogEditOpen(
      DescribeNo,
      DescribeName,
      Time,
      Type,
      Describe
    ) {
      this.editForm.DescribeNo = String(DescribeNo);
      this.editForm.DescribeName = String(DescribeName);
      this.editForm.Time = String(Time);
      this.editForm.Type = String(Type);
      this.editForm.Describe = String(Describe);
      this.dialogEditVisible = true;
    },
  },
};
</script>

<style>
</style>